<template>

    <div class="houseMenu">
         
        <div class="tab"  v-for="(item,index) in tabList" :key="index">
         
            <div @click="toggleTab('houseMenu1')"   class="list">
                   {{ item[0] }}
                </div>
                <div @click="toggleTab('houseMenu2')"   class="list">
                 {{  item[1] }}
                </div>
                    <div @click="toggleTab('houseMenu3')"   class="list">
                 {{  item[2] }}
                </div>
        </div>
           <house-menu1 :is="currentTab" keep-alive>
              </house-menu1> 
    </div>


</template>
<script>
import houseMenu1 from "../houseMenu/houseMenu1";
import houseMenu2 from "../houseMenu/houseMenu2";
import houseMenu3 from "../houseMenu/houseMenu3";
export default {
  components: {
    houseMenu1,
    houseMenu2,
    houseMenu3
  },
  data() {
    return {
      currentTab: "houseMenu1",
      tabList: {
        text: ["百年好合宴", "佳偶天成宴", "比翼双飞宴"]
      }
    };
  },
  methods: {
    toggleTab: function(tab) {
      this.currentTab = tab;
    }
  }
};
</script>
<style scoped>
.houseMenu {
  width: 100%;
   height: 70px;
  background-color: #121212;
}
.houseMenu .tab {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  height: 70px;
  line-height: 70px;
}
.houseMenu .tab .list {
  color: #5c5c5c;
  font-size: 16px;
  margin-right: 20px;
  font-weight: 700;
}
.houseMenu .tab .list:hover {
  color: #fff;
  font-size: 16px;
  transform: scale(1.1);
  transition: all 0.3s;
  border-bottom: 2px solid #fe3b88;
}

</style>

